<!--  -->
<template>
  <div classs="chart">
    <h3 class="title">全国</h3>
    <div class="swiper-container" ref="mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in imginfo" :key="index">
          <img :src="item.img" style="width:100%;height:300px" />
        </div>
      </div>
    </div>
    <ul class="navigator">
      <li v-for="(item, index) in imginfo" class="navigatorItem" 
      @click="clickHandle(index)"
      :key="index" :class="{'active':index === currentIndex }">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "",
  data() {
    return { 
      currentIndex:0,
      imginfo: [
        {
          img: "https://img2.woyaogexing.com/2022/11/08/f4196464222af689!400x400.jpg",
          title: "重庆疫情",
        },
        {
          img: "https://img2.woyaogexing.com/2022/11/08/bbc80292bc977877!400x400.jpg",
          title: "湖南邵阳",
        },
        {
          img: "https://img2.woyaogexing.com/2022/11/08/39df7ef24c6e6113!400x400.jpg",
          title: "上海疫情",
        },
      ],
    };
  },
  computed:{
    swiper(){
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    let that = this;
    var mySwiper = new Swiper(".swiper-container", {
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
      autoplay:true,
      on:{
        slideChangeTransitionEnd:function(){
          that.currentIndex = this.activeIndex
        }
      }
    });
  },
  methods:{
    clickHandle(index){
      this.currentIndex = index;
      this.swiper.slideTo(index, 1000, false);
    }
  }
};
</script>

<style  scoped>
.line {
  padding: 0 10px;
  width: 100%;
  height: 300px;
}

.chart {
  position: relative;
  background: #fff;
  padding: 0.16rem 0;
}

.title {
  font-size: 0.16rem;
  margin: 0 0 0.08rem 0.16rem;
}

/* .chart .swiper-pagination {
  position: absolute;
  text-align: center;
  transition: opacity 0.3s;
  transform: translateZ(0);
  z-index: 10;
}

.chart .swiper-pagination-bullet {
  width: calc(20% - 0.02rem);
  text-align: center;
  background: #f7f7f7;
  padding: 0.045rem;
  box-sizing: border-box;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.02rem;
} */

.navigator {
  font-size: 0.12rem;
  list-style: none;
  display: flex;
  padding: 0 0.16rem;
  justify-content: center;
  margin: 0.06rem 0 0;
}

.navigatorItem {
  color: #4169e2;
  background: #f1f5ff;
  position: relative;
  width: calc(20% - 0.02rem);
  text-align: center;
  background: #f7f7f7;
  padding: 0.045rem;
  box-sizing: border-box;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.02rem;
  margin-left: 0.025rem;
}

.active {
  color: #4169e2;
  background: #f1f5ff;
  position: relative;
}
</style>
